<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>首页</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/static/css/city-picker.css" rel="stylesheet"/>
  <link href="/static/css/style.css" rel="stylesheet"/>
  <style>
    body {
      padding-bottom: 50px;
    }

    ul li {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <!-- Tab panes -->
      <div class="tab-content">
        <!--首页页面-->
        <div role="tabpanel" class="tab-pane active" id="home">
          <div class="row">
            <div class="col-xs-12" style="text-align: center; height: 50px"><h3>预约下单</h3></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <form class="form-horizontal" id="order_form">
                <div class="form-group">
                  <label for="username" class="col-xs-3 control-label">姓名：</label>
                  <div class="col-xs-9">
                    <input type="text" class="form-control" id="username" required>
                  </div>
                </div>
                <div class="form-group">
                  <label for="phone" class="col-xs-3 control-label">联系方式：</label>
                  <div class="col-xs-9">
                    <input type="text" class="form-control" id="phone" required>
                  </div>
                </div>
                <div class="form-group">
                  <label for="carType" class="col-xs-3 control-label">货车类型：</label>
                  <div class="col-xs-9">
                    <select class="form-control" id="carType">
                    </select>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-xs-3 control-label">起点：</label>
                  <div style="position: relative;" class="col-xs-9">
                    <input id="startPoint_area" class="form-control" type="text" data-toggle="city-picker" required>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-xs-offset-3 col-xs-9">
                    <input type="text" class="form-control" placeholder="详细地址" id="startPoint_detail" required>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-xs-3 control-label">终点：</label>
                  <div style="position: relative;" class="col-xs-9">
                    <input id="endPoint_area" class="form-control" type="text" data-toggle="city-picker" required>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-xs-offset-3 col-xs-9">
                    <input type="text" class="form-control" placeholder="详细地址" id="endPoint_detail" required>
                  </div>
                </div>

                <div class="form-group">
                  <label for="appointmentTime" class="col-xs-3 control-label">预约时间：</label>
                  <div class="col-xs-9">
                    <input type="text" class="form-control" id="appointmentTime" placeholder="请选择" readonly required>
                  </div>
                </div>
                <div class="form-group">
                  <label for="remark" class="col-xs-3 control-label">备注：</label>
                  <div class="col-xs-9">
                    <textarea class="form-control" id="remark" rows="3"></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label for="distance" class="col-xs-3 control-label">距离：</label>
                  <div class="col-xs-9 input-group">
                    <input type="text" class="form-control" id="distance" required>
                    <span class="input-group-addon">km</span>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-xs-4">
                    <strong id="price" class="text-danger"> - </strong>元
                    <small><u><a href="#" id="price_detail" class="hidden">查看明细</a></u></small>
                  </div>
                  <div class="col-xs-offset-4 col-xs-4">
                    <button type="button" class="btn btn-danger" id="payForOrder_btn">支付下单</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!--订单页面-->
        <div role="tabpanel" class="tab-pane" id="order">
          <div class="row">
            <div class="col-xs-12" style="text-align: center; height: 50px"><h3>订单记录</h3></div>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="row">
                <div class="col-xs-12">
                  <!--订单页导航条-->
                  <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#ongoing" aria-controls="home" role="tab"
                                                              data-toggle="tab" id="ongoing_nav">进行中</a></li>
                    <li role="presentation"><a href="#completed" aria-controls="profile" role="tab"
                                               data-toggle="tab" id="completed_nav">已完成</a></li>
                    <li role="presentation"><a href="#cancelled" aria-controls="messages" role="tab"
                                               data-toggle="tab" id="cancelled_nav">已取消</a></li>
                  </ul>
                </div>
              </div>
              <div class="row">
                <div class="col-xs-12">
                  <!-- Tab panes -->
                  <div class="tab-content">
                    <!--进行中的订单-->
                    <div role="tabpanel" class="tab-pane active" id="ongoing">
                      <section class="aui-scrollView">
                        <div class="aui-order-title" id="orderOngoing">
                        </div>
                      </section>
                    </div>

                    <!--已完成的订单-->
                    <div role="tabpanel" class="tab-pane" id="completed">
                      <section class="aui-scrollView">
                        <div class="aui-order-title" id="orderCompleted">
                        </div>
                      </section>
                    </div>

                    <!--已取消的订单-->
                    <div role="tabpanel" class="tab-pane" id="cancelled">
                      <section class="aui-scrollView">
                        <div class="aui-order-title" id="orderCancelled">
                        </div>
                      </section>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <!--底部导航条-->
      <nav class="navbar navbar-default navbar-fixed-bottom">
        <ul class="nav nav-pills" role="tablist">
          <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"
                                                    id="home_nav"><span
              class="mdi mdi-home"></span>首页</a></li>
          <li role="presentation"><a href="#order" aria-controls="order" role="tab" data-toggle="tab"
                                     id="order_nav"><span
              class="mdi mdi-note"></span>订单</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<!--选择预约时间的modal-->
<div class="modal fade" id="appointmentTimeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">预约时间</h4>
      </div>
      <div class="modal-body">
        <!-- Nav tabs -->
        <nav id="myTabs">
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#day1" aria-controls="day1" role="tab"
                                                      data-toggle="tab"></a>
            </li>
            <li role="presentation"><a href="#day2" aria-controls="day2" role="tab" data-toggle="tab"></a></li>
            <li role="presentation"><a href="#day3" aria-controls="day3" role="tab" data-toggle="tab"></a></li>
            <li role="presentation"><a href="#day4" aria-controls="day4" role="tab" data-toggle="tab"></a></li>
            <li role="presentation"><a href="#day5" aria-controls="day5" role="tab" data-toggle="tab"></a></li>
          </ul>
        </nav>

        <!-- Tab panes -->
        <div class="tab-content" id="myPanels">
          <div role="tabpanel" class="tab-pane active" id="day1"></div>
          <div role="tabpanel" class="tab-pane" id="day2"></div>
          <div role="tabpanel" class="tab-pane" id="day3"></div>
          <div role="tabpanel" class="tab-pane" id="day4"></div>
          <div role="tabpanel" class="tab-pane" id="day5"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="submit">确认</button>
      </div>
    </div>
  </div>
</div>

<!--查看价格详情的modal-->
<div class="modal fade" id="priceDetailModal" tabindex="-1" role="dialog" aria-labelledby="priceModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="priceModalLabel">价格详情</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-4">货车类型：</div>
          <div class="col-xs-4" id="typeName"></div>
        </div>
        <div class="row">
          <div class="col-xs-4">公里数：</div>
          <div class="col-xs-4" id="kilometers"></div>
        </div>
        <hr>
        <div class="row">
          <div class="col-xs-4">价格类型</div>
          <div class="col-xs-4">价格标准</div>
          <div class="col-xs-4">您的费用</div>
        </div>
        <div class="row" id="startPrice">
          <div class="col-xs-4">起步价(5公里)：</div>
          <div class="col-xs-4"><strong>-</strong> 元</div>
          <div class="col-xs-4"><strong>-</strong> 元</div>
        </div>
        <div class="row" id="priceBetween5And25">
          <div class="col-xs-4">分段价(5~25公里)：</div>
          <div class="col-xs-4"><strong>-</strong> 元/公里</div>
          <div class="col-xs-4"><strong>-</strong> 元</div>
        </div>
        <div class="row" id="priceBetween25And60">
          <div class="col-xs-4">分段价(25~60公里)：</div>
          <div class="col-xs-4"><strong>-</strong> 元/公里</div>
          <div class="col-xs-4"><strong>-</strong> 元</div>
        </div>
        <div class="row" id="priceGt60">
          <div class="col-xs-4">分段价(大于60公里)：</div>
          <div class="col-xs-4"><strong>-</strong> 元/公里</div>
          <div class="col-xs-4"><strong>-</strong> 元</div>
        </div>
        <div class="row">
          <div class="col-xs-4">总计：</div>
          <div class="col-xs-offset-4 col-xs-4"><strong class="text-danger" id="total_price">-</strong> 元</div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 查看订单详情的Modal -->
<div class="modal fade" id="orderDetailModal" tabindex="-1" role="dialog" aria-labelledby="orderDetailModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="orderDetailModalLabel">-</h4>
      </div>
      <div class="modal-body">
        <div class="row" id="driver_info">
          <div class="col-xs-2">
            <img src="#" class="img-circle" alt="" id="driver_img">
          </div>
          <div class="col-xs-10">
            <div class="row">
              <div class="col-xs-4" id="driver_name"></div>
            </div>
            <div class="row">
              <div class="col-xs-4" id="driver_phone"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12" id="appointTime"></div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <p class="aui-order-fl aui-order-address" id="startPoint"></p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <p class="aui-order-fl aui-order-door" id="endPoint"></p>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-2">订单号</div>
          <div class="col-xs-10" id="order_id"></div>
        </div>
        <div class="row">
          <div class="col-xs-2">订单车型</div>
          <div class="col-xs-10" id="order_carType"></div>
        </div>
        <div class="row">
          <div class="col-xs-2">联系电话</div>
          <div class="col-xs-offset-1 col-xs-9" id="c_phone"></div>
        </div>
        <div class="row">
          <div class="col-xs-2">订单价格</div>
          <div class="col-xs-8" id="order_price"></div>
          <div class="col-xs-2">
            <a data-toggle="collapse" href="#collapsePriceDetail" aria-expanded="false"
               aria-controls="collapsePriceDetail">
              <small class="text-primary">费用明细</small>
            </a>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <div class="collapse m-t-10" id="collapsePriceDetail">
              <div class="well">
                <div class="row">
                  <div class="col-xs-4">价格类型</div>
                  <div class="col-xs-4">价格标准</div>
                  <div class="col-xs-4">您的费用</div>
                </div>
                <div class="row" id="order_startPrice">
                  <div class="col-xs-4">起步价(5公里)：</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                </div>
                <div class="row" id="order_priceBetween5And25">
                  <div class="col-xs-4">分段价(5~25公里)：</div>
                  <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                </div>
                <div class="row" id="order_priceBetween25And60">
                  <div class="col-xs-4">分段价(25~60公里)：</div>
                  <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                </div>
                <div class="row" id="order_priceGt60">
                  <div class="col-xs-4">分段价(大于60公里)：</div>
                  <div class="col-xs-4"><strong>-</strong> 元/公里</div>
                  <div class="col-xs-4"><strong>-</strong> 元</div>
                </div>
                <div class="row">
                  <div class="col-xs-4">总计：</div>
                  <div class="col-xs-offset-4 col-xs-4"><strong class="text-danger" id="order_total_price">-</strong> 元
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-danger" id="cancel_btn">取消订单</button>
      </div>
    </div>
  </div>
</div>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/city-picker.data.js"></script>
<script src="/static/js/city-picker.js"></script>
<script src="/static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/static/js/lightyear.js"></script>
<script src="/static/js/mycommons.js"></script>
<script>
  let openid = 'oBIxH683cFic16uvYKkcBwuaJsJY', year, appointmentTimeStr = '', appointmentTime = ''
  $(function () {
    let code = getUrlParam("code")
    $.post("/wx/getOpenId", {code: code}, function (res) {
      if (res != null && res !== "") {
        openid = res
      } else {
        // $("body").html("<h1>为了更好的为您提供服务，请关注“极安物流”微信公众号办理业务</h1>")
      }
    })
    getCarTypes("#carType")
  })

  //获取url中的参数
  function getUrlParam(name) {
    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    let r = window.location.search.substr(1).match(reg);  //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
  }

  /*
  预约时间模态框的tab点击事件
   */
  $('#myTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })

  /*
  点击预约时间输入框弹出对应模态框
   */
  $("#appointmentTime").click(function () {
    //填充模态框数据
    fillTimeData()
    $('#appointmentTimeModal').modal({
      backdrop: 'static'
    })
  })

  /*
   获取当前日期
   */
  function getDate() {
    let now = new Date()
    year = now.getFullYear();
    let month = now.getMonth() + 1;
    let date = now.getDate();
    return "今天(" + month.toString().padStart(2, '0') + "-" + date.toString().padStart(2, '0') + ")"
  }

  /*
  解析星期几
   */
  function parseWeekday(day) {
    let weekdays = ['日', '一', '二', '三', '四', '五', '六']
    return '周' + weekdays[day]
  }

  /*
  解析几天后的日期
   */
  function parseNewDate(days) {
    let now = new Date()
    let newDate = new Date(now.getTime() + 1000 * 60 * 60 * 24 * days)
    let mouth = newDate.getMonth() + 1
    let date = newDate.getDate()
    let day = newDate.getDay()
    let weekday = parseWeekday(day)

    return weekday + '(' + mouth.toString().padStart(2, '0') + '-' + date.toString().padStart(2, '0') + ')'
  }

  /*
  填充预约时间选择的li
   */
  function fillTimeLi(isToday, ele) {
    $(ele).empty()
    //最近的小时
    let startHour = 0
    if (isToday) {
      startHour = new Date(new Date().getTime() + 1000 * 60 * 60).getHours()
    }

    let ul = $("<ul></ul>").addClass("list-inline")
    for (let i = startHour; i < 24; i++) {
      let li = $("<li></li>").append($("<button><button").addClass("btn btn-default time_btn").text(i.toString().padStart(2, '0') + ":00"))
      ul.append(li)
    }
    ul.appendTo($(ele))
  }

  /*
  填充模态框数据
   */
  function fillTimeData() {
    $.each($("#myTabs a"), function (index, item) {
      if (index === 0) {
        $(this).text(getDate())
      } else {
        $(this).text(parseNewDate(index))
      }
    })
    fillTimeLi(true, "#day1")
    fillTimeLi(false, "#day2")
    fillTimeLi(false, "#day3")
    fillTimeLi(false, "#day4")
    fillTimeLi(false, "#day5")
  }

  /*
  获取货车类型填充到下拉列表
   */
  function getCarTypes(ele) {
    $.get("/wx/carType", {}, function (res) {
      if (res.flag) {
        $.each(res.data, function () {
          let optionEle = $("<option></option>")
              .append(this.name + "(长宽高：" + this.length + "*" + this.width + "*" + this.height + "米 载重：" + this.loads + "公斤)")
              .attr("value", this.id);
          optionEle.appendTo(ele);
        })
      }
    })
  }

  /*
  确认按钮点击事件
   */
  $("#submit").click(function () {
    $("#appointmentTimeModal").modal('hide')
    let appointmentDateStr = $("#myTabs ul .active a").text();
    let left = appointmentDateStr.indexOf("(")
    let dateStr = appointmentDateStr.substring(left + 1, appointmentDateStr.length - 1)
    let dateArr = dateStr.split("-")
    let mouth = dateArr[0]
    let date = dateArr[1]
    appointmentTime = year + '-' + mouth + '-' + date + "T" + appointmentTimeStr + ":00"
    $("#appointmentTime").val(appointmentDateStr + " " + appointmentTimeStr)
  })

  /*
  预约时间的li的点击事件
   */
  $(document).on("click", ".time_btn", function () {
    $("#myPanels").find("*").removeClass("btn-warning")
    $(this).addClass("btn-warning")
    appointmentTimeStr = $(this).text()
  })

  /*
  编辑距离框发送请求获得并展示订单价格
   */
  $(document).on("input propertychange", "#distance", function () {
    let distance = $(this).val()
    if ($.trim(distance).length !== 0 && distance !== '') {
      $.get("/wx/order_price",
          {
            typeId: $("#carType").val(),
            distance: distance
          },
          function (res) {
            $("#price").text(res)
          })
      $("#price_detail").removeClass("hidden")
    } else {
      $("#price_detail").addClass("hidden")
    }
  })

  /*
  监听类型的变化以计算订单价格
   */
  $("#carType").change(function () {
    let distance = $("#distance").val()
    if ($.trim(distance).length !== 0 && distance !== '') {
      $.get("/wx/order_price",
          {
            typeId: $(this).val(),
            distance: distance
          },
          function (res) {
            $("#price").text(res)
          })
    }
  })

  /*
  点击查看价格详情弹出模态框
   */
  $("#price_detail").click(function () {
    //先填充模态框数据
    fillPriceDetailModal()

    $('#priceDetailModal').modal({
      backdrop: 'static'
    })
  })

  /*
  填充价格详情的modal
   */
  function fillPriceDetailModal() {
    $.get("/wx/rule", {typeId: $("#carType").val()}, function (res) {
      if (res.flag) {
        let ruleVo = res.data
        let distance = $("#distance").val()
        $("#typeName").text(ruleVo.carType.name)
        $("#kilometers").text(distance)
        $("#startPrice strong:eq(0)").text(ruleVo.startPrice)
        $("#priceBetween5And25 strong:eq(0)").text(ruleVo.priceBetween5And25)
        $("#priceBetween25And60 strong:eq(0)").text(ruleVo.priceBetween25And60)
        $("#priceGt60 strong:eq(0)").text(ruleVo.priceGt60)
        $("#total_price").text($("#price").text())

        $("#startPrice strong:eq(1)").text(ruleVo.startPrice)
        if (5 <= distance && distance <= 25) {
          $("#priceBetween5And25 strong:eq(1)").text((distance - 5) * ruleVo.priceBetween5And25)
        } else if (distance <= 60) {
          $("#priceBetween5And25 strong:eq(1)").text(20 * ruleVo.priceBetween5And25)
          $("#priceBetween25And60 strong:eq(1)").text((distance - 25) * ruleVo.priceBetween25And60)
        } else if (distance > 60) {
          $("#priceBetween5And25 strong:eq(1)").text(20 * ruleVo.priceBetween5And25)
          $("#priceBetween25And60 strong:eq(1)").text(35 * ruleVo.priceBetween25And60)
          $("#priceGt60 strong:eq(1)").text((distance - 60) * ruleVo.priceGt60)
        }
      }
    })
  }

  /*
  支付下单按钮点击事件
   */
  $("#payForOrder_btn").click(function () {
    $.post("/wx/pay",
        {
          name: $("#username").val(),
          phone: $("#phone").val(),
          openid: openid,
          typeId: $("#carType").val(),
          startPoint: $("#startPoint_area").val() + $("#startPoint_detail").val(),
          endPoint: $("#endPoint_area").val() + $("#endPoint_detail").val(),
          appointmentTime: appointmentTime,
          remark: $("#remark").val(),
          distance: $("#distance").val(),
          price: $("#price").text()
        },
        function (res) {
          msgNotify(res.msg, 'success', 1500)
          $("#order_form")[0].reset()
          setTimeout(function () {
            $("#order_nav").click()
          }, 1500)
        })
  })

  //点击底部订单导航触发事件
  $("#order_nav").click(function () {
    //获取进行中的订单
    getOrdersByStatus([0, 1], '#orderOngoing')
  })

  //点击订单状态tab查询订单
  $("#ongoing_nav").click(function () {
    getOrdersByStatus([0, 1], '#orderOngoing')
  })
  $("#completed_nav").click(function () {
    getOrdersByStatus([2], '#orderCompleted')
  })
  $("#cancelled_nav").click(function () {
    getOrdersByStatus([3], '#orderCancelled')
  })

  //抽取公共的访问订单方法
  function getOrdersByStatus(statuses, ele) {
    $.get("/wx/customer/order", {openid: openid, statuses: statuses}, function (res) {
      let noOrdersStr = '<div style="text-align: center">' +
          '<h1>暂无订单</h1><button type=\'button\' class=\'btn btn-warning to_order_page_btn\'>去下单</button> ' +
          '</div>'
      if (res.flag) {
        let list = res.data
        if (list.length > 0) {
          let orderListStr = ""
          $.each(list, function () {
            let orderStr = "<div class=\"aui-order-box order_detail\">\n" +
                "      <a href=\"javascript:void(0);\" class=\"aui-well-item\">\n" +
                "        <div class=\"aui-well-item-bd\">\n" +
                "<input type='text' class='hidden' value='" + this.id + "'>" +
                "<input type='text' class='hidden' value='" + this.status + "'>" +
                "          <p class=\"aui-order-fl aui-order-time\">" + formatTimeObj(this.appointmentTime) + "</p>\n" +
                "        </div>\n" +
                "      </a>\n" +
                "      <hr>\n" +
                "      <p class=\"aui-order-fl aui-order-address\">" + this.startPoint + "</p>\n" +
                "      <p class=\"aui-order-fl aui-order-door\">" + this.endPoint + "</p>\n" +
                "      <hr>\n" +
                "      <p>" + this.carType.name + "</p>\n" +
                "    </div>"
            orderListStr += orderStr
          })
          $(ele).html(orderListStr)
        } else {
          $(ele).html(noOrdersStr)
        }
      } else {
        $(ele).html(noOrdersStr)
      }
    })
  }

  //去下单按钮点击事件
  $(document).on('click', '.to_order_page_btn', function () {
    $("#home_nav").click()
  })

  //格式化订单显示时间
  function formatTimeObj(datetime) {
    let nowYear = new Date().getFullYear()
    let year = datetime.year
    let month = datetime.monthValue.toString().padStart(2, '0')
    let day = datetime.dayOfMonth.toString().padStart(2, '0')
    let hour = datetime.hour.toString().padStart(2, '0')
    let minute = datetime.minute.toString().padStart(2, '0')
    //如果是今年的订单，则不显示年份
    if (year === nowYear) {
      return month + "月" + day + "日 " + hour + ":" + minute
    } else {
      return year + "年" + month + "月" + day + "日 " + hour + ":" + minute
    }
  }

  //监听订单点击，查看订单详情
  $(document).on("click", ".order_detail", function () {
    let id = $(this).find("input:eq(0)").val()
    let status = $(this).find("input:eq(1)").val()
    window.location.href = "/wx/order_detail?id=" + id + "&status=" + status
  })

</script>
</body>
</html>